$(document).on('click', 'ul.button-set li.fullscreen', function() {
    if ($(document.body).hasClass('fullscreen'))
        $(document.body).removeClass('fullscreen');
    else
        $(document.body).addClass('fullscreen');
});

$(document).on('click', 'ul.button-set.control li, ul.button-set.format>li, ul.button-set.format ul:not(.multi-select) > li', function() {
    if ($(this).parent().hasClass('control')) {
        selection = undefined;
        objBoundary.visible = false;
        console.log($(this).attr('title'));
        switch ($(this).attr('title')) {
            case "Text":
                $('.text-editor-control').show();
                $('.object-format').hide();
                break;
            case "Image":
                break;
            case "Circle":
                $('.text-editor-control').hide();
                $('.object-format').show();
                break;
            case "Rectangle":
                $('.text-editor-control').hide();
                $('.object-format').show();
                break;
        }
    }
    if (!$(this).hasClass('selected')) {
        $(this).parent().children('li.selected').removeClass('selected');
        $(this).addClass('selected');
        if ($(this).parent().parent().parent().hasClass('text-editor-control')) {
            //text editor
            if (selection !== undefined) {
                if ($(this).parent().parent().hasClass('font-size')) {
                    var fontSize = parseInt($(this).attr('value'));
                    selection.style.fontSize = fontSize * myCanvas.width / slideWidth + 'px';
                    $(this).parent().children('select').val($(this).attr('value'));
                }
                if ($(this).parent().parent().hasClass('font-color')) {
                    selection.style.fontColor = $(this).attr('value');
                }
            }
        }
        if ($(this).parent().parent().parent().hasClass('object-format')) {
            //text editor
            if (selection !== undefined) {
                if ($(this).parent().parent().hasClass('border-color')) {
                    var borderColor = $(this).attr('value');
                    console.log(fontSize);
                    selection.style.border = borderColor;
                }
                if ($(this).parent().parent().hasClass('background-color')) {
                    selection.style.background = $(this).attr('value');
                }
            }
        }
        if ($(this).parent().hasClass('animation-control')) {
            //animation control
            animation.drawPosition = parseInt($(this).text());
        }
    }
});

$(document).on('change', '.text-editor-control .text-size', function() {
    if (selection !== undefined) {
        var fontSize = parseInt($(this).val());
        console.log(fontSize);
        selection.style.fontSize = fontSize * myCanvas.width / slideWidth + 'px';
        $('#text-editor').css('font-size', fontSize * myCanvas.width / slideWidth + 'px');
        $(this).parent().children('li').each(function() {
            if (parseInt($(this).attr('value')) == fontSize) {
                $(this).addClass('selected');
            }
            else {
                $(this).removeClass('selected');
            }
        });
    }
});

$(document).on('click', 'ul.button-set.multi-select li', function() {
    if (!$(this).hasClass('selected'))
        $(this).addClass('selected');
    else
        $(this).removeClass('selected');
    if ($(this).parent().parent().parent().hasClass('text-editor-control')) {
        //text editor
        selection.style.fontStyle = '';
        if (selection !== undefined) {
            if ($('ul.button-set.multi-select li.italic').hasClass('selected'))
                selection.style.fontStyle += 'italic ';
            if ($('ul.button-set.multi-select li.bold').hasClass('selected'))
                selection.style.fontStyle += 'bold';
        }
    }
});

$(document).on('click', 'ul.button-set li.preview', function() {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        animation.editable = true;
        stopLifeTime();
    }
    else {
        $('.animation-control .start').addClass('selected');
        $('.animation-control .end').removeClass('selected');
        $(this).addClass('selected');
        animation.editable = false;
        tickLifeTime();
    }
});

$(document).on('click', '.slides-container ul li', function() {
    if ($(this).hasClass('selected'))
        return;
    curSlide = $(this);
    if ($(this).hasClass('add-slide')) { //create slide
        $(this).after($(this).clone());
        $(this).children('.slide-index').text(count(cameraPositions) + 1);
        cameraPositions.push(new brPoint(camera.position.x, camera.position.y));
        /*if (count(cameraPositions) == 0)
         cameraPositions.push(new brPoint(0, 0));
         else {
         
         //this is where to start to modify the viewport
         var lastX = cameraPositions[count(cameraPositions) - 1].x;
         cameraPositions.push(new brPoint(lastX + slideWidth, 0));
         
         }*/
        $(this).parents('.slides-container').animate({scrollTop: $(this).parents('.slides-container')[0].scrollHeight}, 500);
        currentCameraPos = count(cameraPositions);
    }
    $(this).parent().children('li.selected').removeClass('selected');
    $(this).addClass('selected');
    objBoundary.visible = false;
    var slideIndex = parseInt(curSlide.children('.slide-index').text());
    var realCameraPosX = (slideIndex - 1) * (slideWidth - $(myCanvas).width());
    currentCameraPos = slideIndex - 1;
    if (!$(this).hasClass('add-slide')) {
        if (animation.editable === true) {
            camera.position.x = cameraPositions[slideIndex - 1].x * myCanvas.width / slideWidth;
            camera.position.y = cameraPositions[slideIndex - 1].y * myCanvas.width / slideWidth;
        }
        else {
            var deltaX = Math.abs(cameraPositions[slideIndex - 1].x * myCanvas.width / slideWidth - camera.position.x);
            var deltaY = Math.abs(cameraPositions[slideIndex - 1].y * myCanvas.width / slideWidth - camera.position.y);
            if (deltaX > deltaY) {
                if (deltaX == 0)
                    deltaX = 1;
                camera.accelerate.ay = camera.accelerate.ax * deltaY / deltaX;
            }
            else {
                if (deltaY == 0)
                    deltaY = 1;
                camera.accelerate.ax = camera.accelerate.aY * deltaX / deltaY;
            }
            camera.move(new brPoint(cameraPositions[slideIndex - 1].x, cameraPositions[slideIndex - 1].y), function() {

            });
        }
    }
    $(this).removeClass('add-slide');
});

$(document).on('keydown', '#text-editor', function(e) {
    animation.context.fillStyle = '#ffffff';
    animation.context.font = this.style.fontWeight + ' ' + this.style.fontSize + ' ' + this.style.fontFamily;
    selection.width = animation.context.measureText($(this).val() + String.fromCharCode(e.keyCode)).width;
    $(this).width(animation.context.measureText($(this).val() + String.fromCharCode(e.keyCode)).width);
});

var ready = false;
var particles = new Array();
var anim, heart, camera;
var lastWidth = 0;
var lastHeight = 0;
var canvasWidth = 0;
var canvasHeight = 0;
var objectList;
var cameraPositions = [];
var slideAnimations = [];
var slideWidth = 1366;
var slideIndex = 0;
var bokehCircle = [];

window.onresize = function() {
    var width = $('.editor').width();
    var height = $('.editor').height();
    if (width / screenWidth > height / screenHeight) {
        canvasWidth = myCanvas.width = height / screenHeight * screenWidth;
        canvasHeight = myCanvas.height = height;
    } else {
        canvasWidth = myCanvas.width = width;
        canvasHeight = myCanvas.height = width / screenWidth * screenHeight;
    }
    myCanvas.style.top = ~~((height - myCanvas.height) / 2) + "px";
    myCanvas.style.left = ~~((width - myCanvas.width) / 2) + "px";
    curObject = animation.objectList.first;
    while (curObject !== null) {
        curObject.position.x = curObject.position.x * myCanvas.width / lastWidth;
        curObject.position.y = curObject.position.y * myCanvas.height / lastHeight;
        curObject.speed.vx = curObject.speed.vx * myCanvas.width / lastWidth;
        curObject.speed.vy = curObject.speed.vy * myCanvas.height / lastHeight;
        curObject.accelerator.ax = curObject.accelerator.ax * myCanvas.width / lastWidth;
        curObject.accelerator.ay = curObject.accelerator.ay * myCanvas.height / lastHeight;
        curObject.maxSpeed.vx = curObject.maxSpeed.vx * myCanvas.width / lastWidth;
        curObject.maxSpeed.vy = curObject.maxSpeed.vy * myCanvas.height / lastHeight;
        curObject.width = curObject.width * myCanvas.width / lastWidth;
        curObject.height = curObject.height * myCanvas.height / lastHeight;
        curObject.style.lineWidth = curObject.style.lineWidth * myCanvas.width / lastWidth;
        var fontSize = parseFloat(curObject.style.fontSize);
        curObject.style.fontSize = fontSize * myCanvas.width / lastWidth + 'px';
        curObject = curObject.next;
        camera.accelerate.ax = camera.accelerate.ax * myCanvas.width / lastWidth;
        camera.accelerate.ay = camera.accelerate.ax * myCanvas.height / lastHeight;
        camera.position.x = cameraPositions[currentCameraPos].x * myCanvas.width / lastWidth;
        camera.position.y = cameraPositions[currentCameraPos].y * myCanvas.height / lastHeight;

    }
    animation.background.style.background = '#ffffff';
    animation.background.width = myCanvas.width;
    animation.background.height = myCanvas.height;
    lastWidth = myCanvas.width;
    lastHeight = myCanvas.height;
};
var animation;
var screenWidth = 1366;
var screenHeight = 768;
window.onload = function() {
    var bretId = window.location.href.split('/')[5];
    if (bretId === undefined) {
        data = {
            slideWidth: 1366,
            background: {
                type: "bokeh",
                backgroundColor: "#d45729",
                circleBackground: "rgba(230, 126, 34, 0.3)",
                circleBorder: "rgba(230, 126, 34, 0.5)",
                numberOfCircle: 200
            },
            camera: {
                accelerate: [2000, 2000]
            },
            cameraPositions: [],
            elements: []
        };
        renderBret(JSON.stringify(data));
    }
    $.getJSON('/bret/ws/bret/' + bretId, function(data) {
        renderBret(data.data);
    });
};

function renderBret(dataText) {
    data = JSON.parse(dataText);
    var width = $('.editor').width();
    var height = $('.editor').height();
    if (width / screenWidth > height / screenHeight) {
        canvasWidth = myCanvas.width = height / screenHeight * screenWidth;
        canvasHeight = myCanvas.height = height;
    } else {
        canvasWidth = myCanvas.width = width;
        canvasHeight = myCanvas.height = width / screenWidth * screenHeight;
    }
    myCanvas.style.top = ~~((height - myCanvas.height) / 2) + "px";
    myCanvas.style.left = ~~((width - myCanvas.width) / 2) + "px";
    lastWidth = myCanvas.width;
    lastHeight = myCanvas.height;
    //heart = new HeartAnimation("myCanvas");
    anim = new Animation("myCanvas");

    var canvas = document.getElementById('myCanvas');

    objectList = new brObjectList();
    camera = new brCamera(new brPoint(0, 1)); //create a camera
    camera.accelerate.ax = 2000;
    camera.accelerate.ay = 2000;
    animation = new brAnimation("myCanvas", objectList, false);
    animation.setCamera(camera);
    animation.editable = true;
    animation.live = false;
    var background = new brBackground(new brPoint(), myCanvas.width, myCanvas.height, {backgroundColor: data.background.backgroundColor});
    animation.setBackground(background);
    for (i = 0; i < data.background.numberOfCircle; i++) {
        var context = animation.getContext();
        var x = parseInt(Math.random() * width * 10);
        var y = parseInt(Math.random() * height);
        var radius = parseInt(40 + Math.random() * 80) * myCanvas.width / screenWidth;
        var point = new brPoint(x, y);
        var vx = 0;
        var vy = 0;
        var speed = new brSpeed(vx, vy);
        var ax = (parseInt(Math.random() * 1000) - 500) * myCanvas.width / screenWidth;
        var ay = (parseInt(Math.random() * 1000) - 500) * myCanvas.height / screenHeight;
        var accelerator = new brAccelerator(ax, ay);
        var vmaxx = parseInt(Math.random() * 15) * myCanvas.width / screenWidth;
        var vmaxy = parseInt(Math.random() * 15) * myCanvas.height / screenHeight;
        var maxSpeed = new brSpeed(vmaxx, vmaxy);
        var effects = [];
        if (data.background.type === 'bokeh') {
            effects.push('bokehEffect');
        }
        var circle = new brCircle(point, radius, speed, maxSpeed, accelerator, effects, {background: data.background.circleBackground, border: data.background.circleBorder, lineWidth: 3, position: 'fixed'});
        circle.selectable = false; //for background
        objectList.append(circle);
        bokehCircle.push(circle);
    }

    //Create slides
    cameraPositions = data.cameraPositions;
    slideAnimation = data.slideAnimations;
    for (objectIndex = 0; objectIndex < count(data.elements); objectIndex++) {
        var object;
        var curObject = data.elements[objectIndex];
        //create brEffect because after JSON.parse brEffect object is became Object
        var effectsInfo = [];
        for (var key in curObject.effectsInfo) {
            var breffect = new brEffect(curObject.effectsInfo[key].type,
                    curObject.effectsInfo[key].accelerator, curObject.effectsInfo[key].maxSpeed,
                    curObject.effectsInfo[key].speed, curObject.effectsInfo[key].startAccelerator,
                    curObject.effectsInfo[key].startTime, curObject.effectsInfo[key].endTime, curObject.effectsInfo[key].zoom);
            if (curObject.effectsInfo[key] !== undefined) {
                effectsInfo.push(breffect);
            }
        }
        switch (curObject.type) {
            case "Text":
                object = new brText(curObject.name, curObject.content, curObject.startPoint, curObject.width, curObject.height, new brSpeed(0, 0), new brSpeed(0, 0), new brAccelerator(0, 0), curObject.orgStyle, effectsInfo);
                break;
            case "Image":
                object = new brImage(curObject.startPoint, curObject.image.src, curObject.width, curObject.height, new brSpeed(0, 0), new brSpeed(0, 0), new brAccelerator(0, 0), curObject.style, effectsInfo);
                break;
            case "Elipse":
                object = new brElipse(curObject.startPoint, curObject.width, curObject.height, new brSpeed(0, 0), new brSpeed(0, 0), new brAccelerator(0, 0), curObject.style, effectsInfo);
                break;
            case "Rectangle":
                object = new brRectangle(curObject.startPoint, curObject.width, curObject.height, new brSpeed(0, 0), new brSpeed(0, 0), new brAccelerator(0, 0), curObject.style, effectsInfo);
                break;
            default:
                break;
        }
        object.index = curObject.index;
        objectList.append(object);
    }
    var bretBoundary = new brBoundary('objBoundary', new brPoint(100, 100), 100, 100, true);
    bretBoundary.visible = false;
    bretBoundary.mouseOut = bretBoundaryMouseOut;
    bretBoundary.mouseMove = bretBoundaryMouseMove;

    animation.start();
    //physicParticles(anim);
}
;

function rectSelectionEnd() {
    objBoundary.visible = false;
}

function rectMouseDown(e) {
    objBoundary.startPoint.x = this.position.x;
    objBoundary.startPoint.y = this.position.y;
    objBoundary.width = this.width;
    objBoundary.height = this.height;
    objBoundary.visible = true;
}

function bretBoundaryMouseDown(e) {
    var canvas = animation.getContext().canvas;
    resizing = false;
    if (!resizing && selection.resizable) {
        if (e.x - 5 < this.startPoint.x) {
            if (e.y - 5 < this.startPoint.y) {
                canvas.style.cursor = 'nwse-resize';
                resizing = true;
                moving = false;
                resizingPos = 1;
            }
            if (e.y + 5 > this.startPoint.y + this.height) {
                canvas.style.cursor = 'nesw-resize';
                resizing = true;
                moving = false;
                resizingPos = 4;
            }
        }
        if (e.x + 5 > this.startPoint.x + this.width) {
            if (e.y - 5 < this.startPoint.y) {
                canvas.style.cursor = 'nesw-resize';
                resizing = true;
                moving = false;
                resizingPos = 2;
            }
            if (e.y + 5 > this.startPoint.y + this.height) {
                canvas.style.cursor = 'nwse-resize';
                resizing = true;
                moving = false;
                resizingPos = 3;
            }
        }
    }
    else {
        moving = true;
        resizing = false;
    }
    if (resizing && !moving) {
        resStartX = selection.position.x;
        resStartY = selection.position.y;
        switch (resizingPos) {
            case 1:
                resStartX = selection.position.x + selection.width;
                resStartY = selection.position.y + selection.height;
                break;
            case 2:
                resStartY = selection.position.y + selection.height;
                break;
            case 3:
                break;
            case 4:
                resStartX = selection.position.x + selection.width;
                break;
        }
    }
    //ket cho nay
}

function bretBoundaryMouseOut(e) {
    var canvas = animation.getContext().canvas;
    if (!resizing)
        canvas.style.cursor = '';
}

var resizing = false;
var resizingPos = 0; /* 1 -> 2 
 * 4 -> 3 */
var moving = false;
var resStartX = -1;
var resStartY = -1;
var startPosition = 0;
function bretBoundaryMouseMove(e) {
    if (this.visible == false)
        return;
    var canvas = animation.getContext().canvas;
    if (!resizing && !moving && selection.resizable) {
        canvas.style.cursor = '';
        if (e.x - 5 < this.startPoint.x) {
            if (e.y - 5 < this.startPoint.y) {
                canvas.style.cursor = 'nwse-resize';
                startPosition = 1; //top left
            }
            if (e.y + 5 > this.startPoint.y + this.height) {
                canvas.style.cursor = 'nesw-resize';
                startPosition = 4; //bottom left
            }
        }
        if (e.x + 5 > this.startPoint.x + this.width) {
            if (e.y - 5 < this.startPoint.y) {
                canvas.style.cursor = 'nesw-resize';
                startPosition = 2; //top right
            }
            if (e.y + 5 > this.startPoint.y + this.height) {
                canvas.style.cursor = 'nwse-resize';
                startPosition = 3; //bottom right
            }
        }
    }
    if (e.button && camera.endPosition.x + this.startPoint.x == selection.position.x) {
        if (!resizing && !moving && selection.resizable) {
            resStartX = e.x;
            resStartY = e.y;
            if (e.x - 5 < this.startPoint.x) {
                if (e.y - 5 < this.startPoint.y) {
                    canvas.style.cursor = 'nwse-resize';
                    resizing = true;
                }
                if (e.y + 5 > this.startPoint.y + this.height) {
                    canvas.style.cursor = 'nesw-resize';
                    resizing = true;
                }
            }
            if (e.x + 5 > this.startPoint.x + this.width) {
                if (e.y - 5 < this.startPoint.y) {
                    canvas.style.cursor = 'nesw-resize';
                    resizing = true;
                }
                if (e.y + 5 > this.startPoint.y + this.height) {
                    canvas.style.cursor = 'nwse-resize';
                    resizing = true;
                }
            }
        }
        
        //can be resizing
        if (resizing && !moving && selection.resizable) {
            switch (startPosition) {
                case 1:
                    if (selection.position.x - e.x + selection.width > 0) {
                        selection.width = selection.position.x - e.x + selection.width;
                        selection.position.x = e.x;
                    }
                    if (selection.position.y - e.y + selection.height > 0) {
                        selection.height = selection.position.y - e.y + selection.height;
                        selection.position.y = e.y;
                    }
                    break;
                case 2:
                    if (e.x - selection.position.x > 0)
                        selection.width = e.x - selection.position.x;
                    if (selection.position.y - e.y + selection.height > 0) {
                        selection.height = selection.position.y - e.y + selection.height;
                        selection.position.y = e.y;
                    }
                    break;
                case 3:
                    if (e.x - selection.position.x > 0)
                        selection.width = e.x - selection.position.x;
                    if (e.y - selection.position.y > 0)
                        selection.height = e.y- selection.position.y;
                    break;
                case 4:
                    if (selection.position.x - e.x + selection.width > 0) {
                        selection.width = selection.position.x - e.x + selection.width;
                        selection.position.x = e.x;
                    }
                    if (e.y - selection.position.y > 0)
                        selection.height = e.y- selection.position.y;
                    break;
            }
            return false;
        }
        
        if (!resizing) {
            moving = true;
            selection.position.x = selection.startPosition.x + e.deltaX;
            selection.position.y = selection.startPosition.y + e.deltaY;
        }
    }
    return false;
}

function prevSlide() {
    if (animation.editable === false)
    {
        if (camera.moving)
            return;
        if (currentCameraPos > 0) {
            currentCameraPos--;
            if (cameraPositions[currentCameraPos] !== undefined) {
                $('ul.slides li.selected').removeClass('selected');
                $('ul.slides li').get(currentCameraPos).className = 'selected';
                camera.move(cameraPositions[currentCameraPos], function() {
                    if (slideAnimations[currentCameraPos] !== undefined) {
                        eval(slideAnimations[currentCameraPos]);
                    }
                });
            }
        }
    }
}

function nextSlide() {
    if (animation.editable === false)
    {
        if (camera.moving)
            return;
        if (currentCameraPos < cameraPositions.length - 1) {
            currentCameraPos++;
            if (cameraPositions[currentCameraPos] !== undefined) {
                $('ul.slides li.selected').removeClass('selected');
                $('ul.slides li').get(currentCameraPos).className = 'selected';
                camera.move(cameraPositions[currentCameraPos], function() {
                    if (slideAnimations[currentCameraPos] !== undefined) {
                        eval(slideAnimations[currentCameraPos]);
                    }
                });
            }
        }
    }
}

var lastIndex = 0;

var progress = function(data) {
    var action = '';
    if (data.substring(lastIndex) != '')
        action = data.substring(lastIndex);
    console.log(action);
    checkAction(action);
    lastIndex = data.length;
}

var completed = function(data) {
    var action = '';
    if (data.substring(lastIndex) != '')
        action = data.substring(lastIndex);
    console.log(action);
    checkAction(action);
    lastIndex = 0;
    console.log('reconnecting');
    loadData(progress, completed);
}

$(function() {
    loadData(progress, completed);
});

window.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            //left
            prevSlide();
            //animation.camera.move(new brPoint(animation.camera.position.x - 100, animation.camera.endPosition.y));
            break;
        case 38:
            //up
            //animation.camera.move(new brPoint(animation.camera.position.x, animation.camera.position.y - 100));
            break;
        case 39:
            //right
            nextSlide();
            break;
        case 40:
            //down
            //animation.camera.move(new brPoint(animation.camera.position.x, animation.camera.position.y + 100));
            break;
    }
}

function editComplete() {
    var needToShow = false;
    if (objBoundary.visible == true) {
        objBoundary.visible = false;
        needToShow = true;
    }
    setTimeout(function() {
        var imageData = myCanvas.toDataURL('image/png');
        $('ul.slides .selected img').attr('src', imageData);
        if (needToShow)
            objBoundary.visible = true;
    }, 20);
}

function start() {
    var bretId = window.location.href.split('/')[5];
    if (bretId == undefined) {
        alert("You need to save before starting!");
    }
    else {
        OpenInNewTab('/bret/slideshow/' + bretId);
    }
}

function OpenInNewTab(url) {
    var win = window.open(url, '_blank');
    win.focus();
}

function toArray(object) {
    var array = $.map(object, function(value, index) {
        return [value];
    });
    return array;
}

$(document).on('click', '.toolbar .effects', function() {
    console.log(lifeTime);
    if (!$(this).hasClass('selected')) {
        $(this).addClass('selected');
        if (!$('.toolbar .preview').hasClass('selected')) {
            //set effects menu of curObject
            if (objBoundary.visible) {
                $('.animation-list').html('');
                if (selection.effectsInfo !== undefined) {
                    for (var i = 0; i < selection.effectsInfo.length; i++) {
                        var action = selection.effectsInfo[i].type.toLowerCase();
                        action = action.slice(0, action.indexOf('effect'));
                        var animation_name = capitaliseFirstLetter(action);
                        var start_time = selection.effectsInfo[i].startTime;
                        var li = '<li class="animation">' +
                                '<i class="fa fa-star"></i>' +
                                '<span class="animate-name" title="' + animation_name + '">' + animation_name + '</span>' +
                                '<input class="animate-timer" type="number" min="1" max="100" value="' + start_time + '"/>' +
                                '<span>s</span>' +
                                '<i class="fa fa-clear"></i>' +
                                '</li>';
                        $('.animation-list').append(li);
                    }
                }
            } else {
                $('.animation-list').html('<span class="select-hint">Select an object</span>');
            }
            $('.effects-zone').addClass('show');
        }
    } else {
        $(this).removeClass('selected');
        if (!$('.toolbar .preview').hasClass('selected')) {
            $('.effects-zone').removeClass('show');
            //reset before add selection
            $('.effects-menu li').removeClass('selected');
        }
    }
});

var timeOutEffectsMenu;
$(document).on('mouseover', '.editor-zone .editor', function() {
    if ($('.toolbar .effects').hasClass('selected') && !$('.toolbar .preview').hasClass('selected')) {
        clearTimeout(timeOutEffectsMenu);
        //set effects menu of curObject
        /*if(objBoundary.visible) {
         for(var i = 0; i < selection.effectsInfo.length; i++) {
         var action = selection.effectsInfo[i].type.toLowerCase();
         var action_class = [action.slice(0, action.indexOf('effect')), '-', action.slice(action.indexOf('effect'))].join('');
         $('.' + action_class).addClass('selected');
         }
         }*/
        $('.effects-zone').addClass('show');
    }
});
$(document).on('mouseleave', '.editor-zone .editor', function() {
    if ($('.toolbar .effects').hasClass('selected') && !$('.toolbar .preview').hasClass('selected')) {
        timeOutEffectsMenu = setTimeout(function() {
            $('.effects-zone').removeClass('show');
            //reset before add selection
            setTimeout(function() {
                $('.effects-menu li').removeClass('selected');
            }, 200);
        }, 200);
    }
});
$(document).on('mouseover', '.editor-zone .effects-zone', function() {
    if ($('.toolbar .effects').hasClass('selected') && !$('.toolbar .preview').hasClass('selected')) {
        clearTimeout(timeOutEffectsMenu);
        //set effects menu of curObject
        /*if(objBoundary.visible) {
         for(var i = 0; i < selection.effectsInfo.length; i++) {
         var action = selection.effectsInfo[i].type.toLowerCase();
         var action_class = [action.slice(0, action.indexOf('effect')), '-', action.slice(action.indexOf('effect'))].join('');
         $('.' + action_class).addClass('selected');
         }
         }*/
        $('.effects-zone').addClass('show');
    }
});
$(document).on('mouseleave', '.editor-zone .effects-zone', function() {
    if ($('.toolbar .effects').hasClass('selected') && !$('.toolbar .preview').hasClass('selected')) {
        timeOutEffectsMenu = setTimeout(function() {
            $('.effects-zone').removeClass('show');
            //reset before add selection
            setTimeout(function() {
                $('.effects-menu li').removeClass('selected');
            }, 200);
        }, 200);
    }
});

var lifeTime = 0;
var lifeTimeInterval;
function tickLifeTime() {
    lifeTimeInterval = setInterval(function() {
        //console.log(lifeTime);
        lifeTime++;
    }, 1000);
}
function stopLifeTime() {
    lifeTime = 0;
    clearInterval(lifeTimeInterval);
}

$(document).on('keydown', '.animate-timer', function(e) {
    // Allow: backspace, delete, tab, escape, enter
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
    // Allow: Ctrl+A
            (e.keyCode === 65 && e.ctrlKey === true) ||
            // Allow: home, end, left, right
                    (e.keyCode >= 35 && e.keyCode <= 39)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
    if ($(this).attr('max') !== undefined && parseInt($(this).val()) >= parseInt($(this).attr('max'))) {
        $(this).val($(this).attr('max'));
        e.preventDefault();
    }
});

$(document).on('keyup', '.animate-timer', function(e) {
    if ($(this).attr('max') !== undefined && parseInt($(this).val()) >= parseInt($(this).attr('max'))) {
        $(this).val($(this).attr('max'));
    }
});